<!--
 * @Descripttion: 弹幕组件
 * @version: 1.0
 * @Author: 自由如风
 * @Date: 2021-05-21 19:20:17
 * @LastEditors: 自由如风
 * @LastEditTime: 2021-05-23 15:28:34
-->
<template>
  <div
    ref="barrage"
    class="barrage"
    :style="{
      animationDuration: item.speed + 's',
      backgroundColor: item.bgcolor,
    }"
  >
    <slot name="avatar">
      <div class="avatar" @click="$emit('aaa')">
        <img :src="item.avatar || default_avatar" alt="头像" />
      </div>
    </slot>
    <slot name="content">
      <div class="content" v-html="item.content"></div>
    </slot>
    <slot name="control">
      <div class="control">
        <svg
          @click="like"
          t="1621654014532"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6650"
          width="48"
          height="48"
        >
          <path
            d="M739.265306 929.959184h-191.216326c-100.832653 0-188.604082-40.75102-219.428572-56.946939H257.044898c-27.167347 0-49.110204-21.942857-49.110204-49.110204v-397.061225c0-27.167347 21.942857-49.110204 49.110204-49.110204h76.277551c13.583673-4.702041 60.604082-24.555102 82.546939-61.648979 7.836735-13.583673 15.673469-44.930612 22.465306-72.620409 12.016327-49.632653 23.510204-96.130612 50.155102-123.297959 24.555102-25.077551 68.963265-32.914286 110.236735-18.808163 53.289796 18.285714 89.861224 65.306122 97.17551 126.432653 7.314286 59.559184-2.612245 115.983673-7.314286 137.404082-1.044898 4.179592 1.044898 7.314286 2.089796 8.881632 1.044898 1.567347 3.657143 3.657143 8.359184 3.657143h125.910204c49.110204 0 105.534694 46.497959 105.534694 106.579592 0 27.689796-41.795918 348.473469-66.87347 389.746939-27.167347 44.408163-92.995918 55.902041-124.342857 55.902041zM257.044898 419.526531c-4.179592 0-7.314286 3.134694-7.314286 7.314285v397.061225c0 4.179592 3.134694 7.314286 7.314286 7.314286h82.02449l4.702041 2.612244c23.510204 12.538776 107.62449 54.334694 204.277551 54.334694h191.216326c27.689796 0 73.142857-10.971429 88.293878-35.52653 15.673469-27.167347 60.604082-325.485714 60.604081-367.804082 0-34.481633-35.526531-64.783673-63.738775-64.783673h-125.910204c-15.673469 0-30.82449-7.314286-40.751021-19.330613-9.926531-12.538776-13.583673-28.212245-10.448979-43.885714 8.881633-40.228571 10.971429-86.726531 6.791836-123.297959-5.22449-44.930612-31.346939-79.412245-68.963265-91.951021-26.122449-8.881633-53.289796-5.22449-66.873469 8.359184-18.808163 19.330612-28.734694 60.604082-39.706123 103.967347-8.359184 33.436735-15.673469 64.783673-27.167347 84.114286-30.302041 51.722449-90.383673 75.232653-108.146938 81.502041l-3.134694 1.044898H257.044898z"
            p-id="6651"
          ></path>
          <path
            d="M114.938776 864.653061c-11.493878 0-20.897959-9.404082-20.89796-20.897959v-428.408163c0-11.493878 9.404082-20.897959 20.89796-20.897959s20.897959 9.404082 20.897959 20.897959v428.408163c0 12.016327-9.404082 20.897959-20.897959 20.897959z"
            p-id="6652"
          ></path>
        </svg>
      </div>
      <div class="control">
        <svg
          @click="close"
          t="1621654051986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8809"
          width="48"
          height="48"
        >
          <path
            d="M512 1024C229.376 1024 0 794.624 0 512S229.376 0 512 0s512 229.376 512 512-229.376 512-512 512z m0-975.36C257.024 48.64 48.64 257.024 48.64 512c0 254.976 207.872 463.36 463.36 463.36S975.36 767.488 975.36 512 766.976 48.64 512 48.64z"
            fill="#2c2c2c"
            p-id="8810"
          ></path>
          <path
            d="M548.864 512l195.072-195.072c9.728-9.728 9.728-25.6 0-36.864l-1.536-1.536c-9.728-9.728-25.6-9.728-35.328 0L512 475.136 316.928 280.064c-9.728-9.728-25.6-9.728-35.328 0l-1.536 1.536c-9.728 9.728-9.728 25.6 0 36.864L475.136 512 280.064 707.072c-9.728 9.728-9.728 25.6 0 36.864l1.536 1.536c9.728 9.728 25.6 9.728 35.328 0L512 548.864l195.072 195.072c9.728 9.728 25.6 9.728 35.328 0l1.536-1.536c9.728-9.728 9.728-25.6 0-36.864L548.864 512z"
            fill="#2c2c2c"
            p-id="8811"
          ></path>
        </svg>
      </div>
    </slot>
  </div>
</template>

<script>
import axios from "../lib/axios";
export default {
  props: {
    item: Object,
  },
  data() {
    return {
      R: Math.random(),
    };
  },
  mounted() {
    if (!this.align) {
      this.$refs.barrage.style.top = parseInt(Math.random() * 30 - 15) + "px";
    }
    setTimeout(() => {
      this.close();
    }, parseInt(this.item.speed * 1000));
  },
  methods: {
    close() {
      this.$emit("onclose", this.item);
    },
    like() {
      axios.post(`/custom/send/${this.item.openId}`);
    },
  },
  computed: {
    align() {
      return this.$store.state.setting.align;
    },
  },
};
</script>

<style scoped>
@keyframes slide {
  0% {
    /* right: -100%; */
    right: 0;
  }
  100% {
    right: 100%;
  }
}
.barrage {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.26);
  border-radius: 1.2em;
  font-size: 30px;
  user-select: none;
  animation: slide 0s linear forwards;
  max-width: 100%;
  transition: all 0.3s;
}
.barrage:hover {
  animation-play-state: paused;
  z-index: 3;
}

.barrage > .avatar {
  height: 100%;
}

.barrage > .avatar > img {
  height: 44px;
  width: 44px;
  border-radius: 50%;
}

.barrage:hover > .control > .icon {
  width: 44px;
  opacity: 1;
}
.barrage > .control {
  height: 100%;
}
.barrage > .control > .icon {
  padding: 0.2em 0.2em;
  box-sizing: border-box;
  height: 100%;
  border-radius: 1em;
  transition: all 0.5s;
  width: 0;
  opacity: 0;
}

.barrage > .control > .icon:hover {
  background-color: rgba(0, 0, 0, 0.301);
}

.barrage > .content {
  padding: 0.1em 0.5em 0.1em 0.5em;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
}
</style>

<style>
.barrage > .content > img {
  height: 100%;
}
</style>